<template>
	<view class="envpowerLayout">
		<view class="envtopLayout">
			<view class="envtpLayout border_box" :animation="animationLeft">
				<view class="border_inner">
					<view class="envtpItem">
						<div id="pecharts" class="pecharts-container"></div>
						<div class="textArea">
							<div class="textline"></div>
							<div class="textbox" v-for="item in sersData">
								<div :style="{ background: item.color, boxShadow: '0 0 15px ' + item.color }"
									class="textleft"></div>
								<div class="textright">
									<span class="textrow1">{{ item.name }}</span>
									<span :style="{ color: item.color }" class="textrow2">{{ item.value }}</span>
								</div>
							</div>
						</div>
					</view>
				</view>
			</view>
			<view class="envrpLayout border_box" :animation="animationRight">
				<view class="border_inner">
					<view class="rpInner">
						<div class="devinfo" v-for="(item,index) in unit8arrs" :key="index">
							<span class="devnum">{{ item.value }}</span>
							<div class="devbgi"
								:style="{background:'url(http://portal.xumengte.com/reddImg/env'+item.key+'.png) no-repeat',backgroundSize:'100% 100%'}">
								<span class="devtitle">{{ item.name }}</span>
								<span class="devunit">{{item.unit}}</span>
							</div>
						</div>
					</view>
				</view>
			</view>
		</view>
		<view class="envbottomLayout border_box" :animation="animationBottom">
			<view class="border_inner">
				<view class="btLayout">
					<div class="btLayout_hour" :class="currTimeIndex === index ? 'hour_item1' : 'hour_item2'"
						v-for="(item, index) in timeTypes" :key="index" @click="changeTimeType(index)">
						<div :class="currTimeIndex === index ? 'hour_text1' : 'hour_text2'">{{ item.name }}</div>
					</div>
				</view>
				<view class="brLayout">
					<div class="chart_item border_box" v-for="(item,index) in unit8arrs" :key="index">
						<view class="border_inner">
							<div class="powerchart">
								<div class="global-visualization-box-head">{{ item.name }}</div>
								<div class="inner_chart">
									<uni-echarts :ref="'echarts'+index" :option="optionAllValue[index]"
										:canvasId="'echarts'+index">
									</uni-echarts>
								</div>
							</div>
						</view>
					</div>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
	const sersData = [{
			ratio: 50,
			value: 90,
			name: '在线传感器',
			color: '#76E0C3'
		},
		{
			ratio: 50,
			value: 0,
			name: '离线传感器',
			color: '#FFE665'
		},
	];
	import moment from "moment";
	import * as echarts from 'echarts';
	import store from '@/store/index.js';
	import $config from '@/common/config.js';
	import request from '@/common/request.js';
	import {
		unit8List
	} from "@/common/const_data.js";
	import UniEcharts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	export default {
		components: {
			UniEcharts
		},
		data() {
			return {
				total: 90,
				isZh1: true,
				homeIcon: [],
				sersData: [],
				animationLeft: {},
				animationRight: {},
				animationBottom: {},
				currTimeIndex: -1,
				screenFont: 12,
				unit8arrs: [],
				seriesArray: [0.48, 0.50, 0.50, 1.19, 2.03, 2.07, 2.11, 1.36, 0.50, 0.52,
					0.51, 0.50, 0.52, 0.49, 0.52, 0.49, 0.51, 0.52, 0.49, 0.52,
					0.50, 0.48, 0.52, 0.49
				],
				seriesArray1: [0.48, 0.48, 0.49, 0.49, 0.49, 0.49, 0.5, 0.5, 0.5, 0.5, 0.5, 0.51, 0.51, 0.52, 0.52, 0.52,
					0.52, 0.52, 0.52, 1.19, 1.36, 2.03, 2.07, 2.11
				],
				xAxisArray: ["11时", "12时", "13时", "14时", "15时", "16时", "17时", "18时", "19时", "20时", "21时", "22时", "23时",
					"00时", "01时", "02时", "03时", "04时", "05时", "06时", "07时", "08时", "09时", "10时"
				],
				xAxisArray1: ["13日", "14日", "15日", "16时", "17日", "18日", "19日"],
				xAxisArray2: ["20日", "21日", "22日", "23时", "24日", "25日", "26日", "27日", "28日", "29日", "30时", "1日", "2日",
					"3日", "4日", "5日", "6时", "7日", "8日", "9日", "10日", "11日", "12日",
					"13日", "14日", "15日", "16时", "17日", "18日", "19日"
				],
				timeTypes: [],
				optionPValue: {},
				optionEValue: {},
				optionItemValue0: {},
				optionItemValue1: {},
				optionItemValue2: {},
				optionItemValue3: {},
				optionAllValue: [],
				changeEStatus: false
			}
		},
		props: {
			defaultIndex: {
				type: Number,
				default: 0
			},
		},
		unmounted() {
			console.log('unmounted==env>>');
		},
		mounted() {
			let that = this;
			console.log('mounted==env>>');
			this.unit8arrs = unit8List;
			if (store.state.propertiesData) {
				let propertiesData = store.state.propertiesData;
				that.unit8arrs.forEach(item => {
					item.value = propertiesData[item.code] || '0'
				});
			}
			document.addEventListener("keydown", function(event) {
				if (that.changeEStatus) {
					return false;
				}
				that.changeEStatus = true;
				if (event.key === "ArrowDown") {
					if (that.currTimeIndex < 3) {
						that.changeTimeType(that.currTimeIndex + 1);
					}
				} else if (event.key === "ArrowUp") {
					if (that.currTimeIndex > 0) {
						that.changeTimeType(that.currTimeIndex - 1);
					}
				}
				setTimeout(() => {
					that.changeEStatus = false;
				}, 2000);
			});
			this.animation0 = uni.createAnimation({
				duration: 2000,
				timingFunction: "ease"
			})
			this.animation = uni.createAnimation({
				duration: 2000,
				timingFunction: "ease"
			})
			this.animation1 = uni.createAnimation({
				duration: 2000,
				timingFunction: "ease"
			})

			this.animation0.right(480);
			this.animation0.translateX(480).step()
			// this.animationLeft = this.animation0.export()

			this.animation.left(960);
			this.animation.translateX(-960).step()
			// this.animationRight = this.animation.export()

			this.animation1.top(480);
			this.animation1.translateY(-480).step()
			// this.animationBottom = this.animation1.export()
			this.sersData = sersData;
			this.timeTypes = [{
					id: 1,
					name: '最近24小时',
					timeType: "hour", //最近24小时
					startTime: moment().startOf("hour").add(-24, 'hours').format(DATE_TIME_FORMAT),
					endTime: moment().startOf("hour").format(DATE_TIME_FORMAT),
					xUnit: "时"
				},
				{
					id: 2,
					name: '最近一周',
					timeType: "day", //最近一周
					startTime: moment().startOf('day').add(-7, 'day').format(DATE_TIME_FORMAT),
					endTime: moment().startOf('day').format(DATE_TIME_FORMAT),
					xUnit: "日"
				},
				{
					id: 3,
					name: '最近一月',
					timeType: "day", //最近一月
					startTime: moment().startOf('day').add(-30, 'day').format(DATE_TIME_FORMAT),
					endTime: moment().startOf('day').format(DATE_TIME_FORMAT),
					xUnit: "日"
				},
				{
					id: 4,
					name: '最近半年',
					timeType: "day", //最近半年
					startTime: moment().startOf('day').add(-180, 'day').format(DATE_TIME_FORMAT),
					endTime: moment().startOf('day').format(DATE_TIME_FORMAT),
					xUnit: "日"
				},
			];
			this.optionPValue = {
				tooltip: {
					show: false,
				},
				color: [
					new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: "#B1ECFF"
						},
						{
							offset: 1,
							color: "#000"
						}
					]),
					"rgba(0,0,0,0)",
					new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: "#000"
						},
						{
							offset: 1,
							color: "#B1ECFF"
						}
					]),
					new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: "#000"
						},
						{
							offset: 1,
							color: "#B1ECFF"
						}
					]),
					"rgba(0,0,0,0)",
					new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: "#B1ECFF"
						},
						{
							offset: 1,
							color: "#000"
						}
					]),

					new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: "#76E0C3"
						},
						{
							offset: 1,
							color: "#0f1d1a"
						}
					]),

					new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: "#24210f"
						},
						{
							offset: 1,
							color: "#FFE665"
						}
					]),
					"#B1ECFF" //中间圈
				],
				series: [{
						type: 'pie',
						radius: ['85%', '88%'],
						center: ['40%', '50%'],
						data: [{
								value: 100 / 4 * (2 / 3)
							},
							{
								value: 100 / 4 * (2 / 3)
							},
							{
								value: 100 / 4 * (2 / 3)
							},
							{
								value: 100 / 4 * (2 / 3)
							},
							{
								value: 100 / 4 * (2 / 3)
							},
							{
								value: 100 / 4 * (2 / 3)
							}
						],
						label: {
							show: false
						}
					},
					{
						type: 'pie',
						name: '',
						radius: ['60%', '65%'],
						center: ['40%', '50%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: [20, 0, 20, 0],
							borderWidth: 2,
						},
						label: {
							show: true,
							position: 'center',
							formatter: () => {
								return `{a|传感器总数}\n{b|${this.total}}`;
							},
							rich: {
								a: {
									color: '#B1ECFF',
									fontSize: 16,
									padding: [18, 0, 0, 0],
									lineheight: 50,
									border: 1
								},
								b: {
									color: '#76DBFB',
									fontSize: 42,
									fontFamily: 'pieFont',
									padding: [5, 0, 0, 0]
								},
							},
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '40',
								fontWeight: 'bold',
							},
						},
						labelLine: {
							show: false,
						},
						data: [0, 0, 0, 0, 0, 0, sersData[0].ratio, sersData[1].ratio],
					},
					{
						type: 'pie',
						name: '',
						radius: ['45%', '46%'],
						center: ['40%', '50%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderWidth: 2,
						},
						data: [0, 0, 0, 0, 0, 0, 0, 0, 100],
						label: {
							show: false
						}
					}
				],
			};

			this.optionEValue = {
				title: {
					text: '单位：',
					left: "4%",
					top: "0px",
					textStyle: {
						color: "#fff",
						fontSize: 12
					}
				},
				grid: {
					left: "5%",
					top: "20%",
					width: "90%",
					height: "75%",
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					axisLine: {
						show: false
					},
					axisLabel: {
						show: true,
						textStyle: {
							fontSize: 10,
							color: "#fff"
						}
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					data: [],
				},
				yAxis: {
					type: 'value',
					padding: 5,
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.2)",
							type: "solid"
						}
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: "rgba(255,255,255,.3)",
							type: "solid"
						}
					},
					axisLabel: {
						show: true,
						textStyle: {
							fontSize: 12,
							color: "#fff"
						}
					},
				},
				series: {
					data: [],
					type: 'line',
					smooth: true,
					symbolSize: 5,
					showSymbol: false,
					itemStyle: {
						normal: {
							color: "#38D0FB",
							lineStyle: {
								color: "#38D0FB",
								width: 2
							}
						}
					},
					areaStyle: {
						normal: {
							color: {
								colorStops: [{
									offset: 0,
									color: "rgba(0,150,255,0.8)"
								}, {
									offset: 1,
									color: "rgba(56,208,251,0.2)"
								}],
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								type: "linear",
								global: false
							}
						}
					}
				}
			};
			this.screenFont = store.state.screenWidth / 1920 * 16;
			this.optionEValue.title.textStyle.fontSize = this.screenFont * 4 / 5;
			this.optionEValue.xAxis.axisLabel.textStyle.fontSize = this.screenFont * 4 / 5;
			this.optionEValue.yAxis.axisLabel.textStyle.fontSize = this.screenFont * 4 / 5;
			this.optionItemValue0 = {
				...this.optionEValue,
				title: {
					...this.optionEValue.title,
					text: '单位：' + this.unit8arrs[0].unit,
				},
				series: {
					...this.optionEValue.series,
					// data: this.createSeriesRandom(24)
				},
				xAxis: {
					...this.optionEValue.xAxis,
					// data: [...this.xAxisArray]
				}
			}
			this.optionItemValue1 = {
				...this.optionEValue,
				title: {
					...this.optionEValue.title,
					text: '单位：' + this.unit8arrs[1].unit,
				},
				series: {
					...this.optionEValue.series,
					// data: this.createSeriesRandom(24)
				},
				xAxis: {
					...this.optionEValue.xAxis,
					// data: [...this.xAxisArray]
				}
			}
			this.optionItemValue2 = {
				...this.optionEValue,
				title: {
					...this.optionEValue.title,
					text: '单位：' + this.unit8arrs[2].unit,
				},
				series: {
					...this.optionEValue.series,
					// data: this.createSeriesRandom(24)
				},
				xAxis: {
					...this.optionEValue.xAxis,
					// data: [...this.xAxisArray]
				}
			}
			this.optionItemValue3 = {
				...this.optionEValue,
				title: {
					...this.optionEValue.title,
					text: '单位：' + this.unit8arrs[3].unit,
				},
				series: {
					...this.optionEValue.series,
					// data: this.createSeriesRandom(24)
				},
				xAxis: {
					...this.optionEValue.xAxis,
					// data: [...this.xAxisArray]
				}
			}
			this.optionAllValue[0] = this.optionItemValue0;
			this.optionAllValue[1] = this.optionItemValue1;
			this.optionAllValue[2] = this.optionItemValue2;
			this.optionAllValue[3] = this.optionItemValue3;
			this.$nextTick(() => {
				let chartDom = document.getElementById('pecharts');
				let echartInstance = echarts.init(chartDom);
				this.optionPValue.series[1].label.rich.a.fontSize = this.screenFont * 1.2;
				this.optionPValue.series[1].label.rich.b.fontSize = this.screenFont * 3;
				echartInstance.setOption(this.optionPValue);
			})
			if (store.state.hasLogin) {
				uni.showLoading({
					mask: true
				})
				this.logByConfig(0)
			}
		},

		methods: {
			logByConfig(position) {
				let that = this;
				let postData = {
					"configId": "env",
					"projectId": $config.pcode,
					...this.timeTypes[position]
				};
				let headerdata = {
					"content-type": "application/json"
				};
				request.postRaw('/jeecgboot/device/data/logByConfig', headerdata, postData).then(resData => {
					console.log('resData==>>', resData);
					if (resData.code == 200) {
						let resultData = resData.result;
						let currTimeType = that.timeTypes[position];
						let xAxisData = resultData.range.map((item) => {
							if (currTimeType.id == 1) {
								return item.substring(11) + currTimeType.xUnit;
							} else if (currTimeType.id == 4) {
								return item.substring(5, 10) + currTimeType.xUnit;
							} else {
								return item.substring(8, 10) + currTimeType.xUnit;
							}
						});
						console.log('xAxisData==>>', xAxisData);
						for (let i = 0; i < that.optionAllValue.length; i++) {
							let seriesData = [];
							let configCode = that.unit8arrs[i].code;
							// console.log('configCode==>>', configCode);
							resultData.mdData?.forEach((item) => {
								let val = item.slice(-1)[0][configCode];
								val = val?.toFixed(2) || 0
								seriesData.push(val);
							});
							// console.log('seriesData==>>', seriesData);
							that.optionAllValue[i] = {
								...that.optionAllValue[i],
								series: {
									...that.optionAllValue[i].series,
									data: seriesData
								},
								xAxis: {
									...that.optionAllValue[i].xAxis,
									data: xAxisData
								}
							};
							that.currTimeIndex = position;
						}
						uni.hideLoading()
					} else {
						uni.hideLoading()
					}
				}).catch(errData => {
					uni.hideLoading()
					console.log('errData==env>>', errData)
				});
			},
			randomInt(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			changeTimeType(position) {
				let that = this;
				uni.showLoading({
					mask: true
				})
				console.log('changeTimeType==>>', position);
				if (store.state.hasLogin) {
					this.logByConfig(position)
				}
			},
			createRandomSerdata(position) {
				if (position == 0) {
					for (let i = 0; i < this.optionAllValue.length; i++) {
						this.optionAllValue[i] = {
							...this.optionEValue,
							series: {
								...this.optionEValue.series,
								data: this.createSeriesRandom(24)
							},
							xAxis: {
								data: [...this.xAxisArray]
							}
						}
					}

				} else if (position == 1) {
					for (let i = 0; i < this.optionAllValue.length; i++) {
						this.optionAllValue[i] = {
							...this.optionEValue,
							series: {
								...this.optionEValue.series,
								data: this.createSeriesRandom(7)
							},
							xAxis: {
								data: [...this.xAxisArray1]
							}
						}
					}
				} else if (position == 2) {
					for (let i = 0; i < this.optionAllValue.length; i++) {
						this.optionAllValue[i] = {
							...this.optionEValue,
							series: {
								...this.optionEValue.series,
								data: this.createSeriesRandom(30)
							},
							xAxis: {
								data: [...this.xAxisArray2]
							}
						}
					}
				}
			},
			createSeriesRandom(index) {
				let array = [];
				let randomBase = 3;
				if (index == 7) {
					randomBase = 35;
				} else if (index == 24) {
					randomBase = 3;
				} else if (index == 30) {
					randomBase = 100;
				}
				for (let i = 0; i < index; i++) {
					array[i] = Math.random() * randomBase
				}
				return array;
			}
		},
	}
</script>

<style lang="less" scoped>
	@text-area-left-height: 2vh;

	page {
		background-color: #000;
		height: 100%;
	}

	.envpowerLayout {
		width: 100%;
		height: 100%;
		background-color: #090918e6;
		margin-right: 20px;
		position: relative;
		display: flex;
		align-items: stretch;
		flex-direction: column;
	}

	.envtopLayout {
		margin: 4px;
		display: flex;
		flex: 3;
		width: 97vw;
		height: 100%;
	}

	.envbottomLayout {
		bottom: 480;
		position: relative;
		margin: 1vw 0.5vw 0.2vw;
		display: flex;
		flex: 4;
		width: 96.5vw;
		height: 100%;

	}

	.envtpLayout {
		margin: 4px;
		position: relative;
		display: flex;
		flex: 2;
		width: 100%;
		height: 100%;
	}

	.envrpLayout {
		position: relative;
		margin: 4px;
		display: flex;
		flex: 5;
		width: 100%;
		height: 100%;
	}

	.btLayout {
		margin: 2vh 1vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
		flex: 3;
		width: 100%;
		height: calc(100%-4vh);
	}

	.brLayout {
		display: flex;
		flex-wrap: wrap;
		flex: 10;
		width: 100%;
		height: 100%;
	}

	.border_box {
		background: linear-gradient(to left, #808080, #808080) left top no-repeat,
			linear-gradient(to bottom, #808080, #808080) left top no-repeat,
			linear-gradient(to left, #808080, #808080) right top no-repeat,
			linear-gradient(to bottom, #808080, #808080) right top no-repeat,
			linear-gradient(to left, #808080, #808080) left bottom no-repeat,
			linear-gradient(to bottom, #808080, #808080) left bottom no-repeat,
			linear-gradient(to left, #808080, #808080) right bottom no-repeat,
			linear-gradient(to left, #808080, #808080) right bottom no-repeat;
		background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px;
		padding: 1px
	}

	.border_inner {
		width: 100%;
		height: 100%;
		border: solid 1px rgba(255, 255, 255, 0.3);
		display: flex;
	}

	.envtpItem {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.pecharts-container {
		width: 70%;
		height: 70%;
	}

	.envtpItemInner {
		display: flex;
		flex-direction: column;
		flex: 1;
		width: 40%;
		height: 100%;
	}

	.textArea {
		margin-right: 0.5vw;
		width: 28%;
		height: 80%;
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-around;
		align-items: center;
		position: relative;
	}

	.textline {
		position: absolute;
		top: 0px;
		left: -60px;
		width: calc(100% + 60px);
		height: 40px;
		background: url('http://portal.xumengte.com/images/line.png') no-repeat;
		background-size: 100% 100%;
	}

	.textbox {
		position: relative;
		right: 1vw;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: flex-start;
	}

	.textleft {
		background: yellow;
		box-shadow: 0 0 10px white;
		height: @text-area-left-height;
		width: @text-area-left-height;
		border-radius: 50%;
		margin-right: 1vh;
	}

	.textright {
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}

	.textrow1 {
		line-height: @text-area-left-height;
		font-size: 1.8vh;
	}

	.textrow2 {
		font-size: 3vh;
		line-height: 4vh;
		padding-top: 1vh;
	}

	.rpInner {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		padding: 3vh 0;
	}

	.devinfo {
		flex: 1;
		width: 100%;
		height: calc(100% - 2vh);
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;
	}

	.devbgi {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: flex-start;
		background-size: 100% 100%;
		height: 12vw;
		width: 8vw;
	}

	.devtitle {
		color: #fff;
		font-size: 1.2vw;
		margin-bottom: 1vh;
		font-weight: bold;
	}

	.devunit {
		color: #6d7682;
		font-size: 1vw;
	}

	.devnum {
		color: #93d8ff;
		font-size: 2.4vw;
		font-family: 'pieFont';
	}

	.devinfo img {
		height: 50%;
	}

	.devicechart {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btLayout_hour {
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(http://portal.xumengte.com/images/hour.png) no-repeat;
		background-size: 100% 100%;
	}

	.hour_item1 {
		width: 100%;
		height: 6vh;
	}

	.hour_item2 {
		width: 100%;
		height: 5vh;
		opacity: 0.4;
	}

	.hour_text1 {
		font-weight: bold;
		font-size: 1vw;
		color: #fff;
	}

	.hour_text2 {
		font-weight: bold;
		font-size: 1vw;
		color: #fff;
		opacity: 0.6;
	}

	.chart_item {
		width: 48%;
		height: 46%;
		margin: 0.4vh 0.2vw 0.2vh;
	}

	.powerchart {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.inner_chart {
		flex: 1;
		width: 100%;
	}
</style>
